<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>Journey through Space: A 3rd grade science learning module</title>
        <script src="scripts/SCORM_API_wrapper.js" language="javascript"></script>
        <script src="scripts/sessionstorage.1.4.js" language="javascript"></script>
        <script src="scripts/scripts.js" language="javascript"></script>
        <script src="scripts/sunhsscripts.js" language="javascript"></script>
        <link href="styles/styles.css" type="text/css" rel="stylesheet"/>
        <link href="styles/hsstyles.css" type="text/css" rel="stylesheet"/>
        
    </head>
    
    <body onload="javascript:visitSun()">
        <div>
            <div>
                <table id="indextable">
                    <tr>
                        <td align="center"><img src="images/mercurytoon.png" height="20px" width="20px"/></td>
                        <td align="center"><img src="images/venustoon.png" height="20px" width="20px"/></td>
                        <td align="center"><img src="images/earthtoon.png" height="20px" width="20px"/></td>
                    </tr>
                        <td align="center"><img src="images/marstoon.png" height="20px" width="20px"/></td>
                        <td align="center"><img src="images/suntoon.png" height="20px" width="20px"/></td>
                        <td align="center"><img src="images/jupitertoon.png" height="20px" width="20px"/></td>
                    <tr>
                        <td align="center"><img src="images/saturntoon.png" height="20px" width="45px"/></td>
                        <td align="center"><img src="images/uranustoon.png" height="20px" width="30px"/></td>
                        <td align="center"><img src="images/neptunetoon.png" height="20px" width="20px"/></td>
                    </tr>
                </table>
            </div>
                            
            <div id="headerimage">
                <a name="top">
                <img src="images/header.jpg"
                    alt="image of module title - Journey through Space: a 3rd grade science learning module"
                    title="image of module title - Journey through Space: a 3rd grade science learning module"
                    width="82%"/>
                </a>
            </div>
        </div>
        
        <div id="nav">
            <div id="nav_wrapper">
                <ul>
                    <li><a class="show" href="welcome.html">Welcome!</a>
                    </li>
                    <li><span class="menu-link-inactive" class="show">The Sun</span>
                    </li>
                    <li><a class="show" href="#">Rocky Planets</a>
                        <ul>
                            <li><a class="show" href="terresterial.html">Rocky Planet Intro</a>
                            </li>
                            <li><a class="show" href="mercury.html">Mercury</a>
                            </li>
                            <li><a class="show" href="venus.html">Venus</a>
                            </li>
                            <li><a class="show" href="earth.html">Earth</a>
                            </li>
                            <li><a class="show" href="mars.html">Mars</a>
                            </li>
                            <li><a class="hide" id="terresterialquizlink" href="terresterialquiz.html">Rocky Planets Quiz</a>
                            </li>
                        </ul>
                    </li>
                    <li><a class="show" href="moon.html">The Moon</a>
                    </li>
                    <li><a class="show" href="asteroid.html">Asteroid Belt</a>
                    </li>
                    <li><a class="show" href="#">Gas Giants</a>
                        <ul>
                            <li><a class="show" href="gaseous.html">Gas Giants Intro</a>
                            </li>
                            <li><a class="show" href="jupiter.html">Jupiter</a>
                            </li>
                            <li><a class="show" href="saturn.html">Saturn</a>
                            </li>
                            <li><a class="show" href="uranus.html">Uranus</a>
                            </li>
                            <li><a class="show" href="neptune.html">Neptune</a>
                            </li>
                            <li><a class="hide" id="gaseousquizlink" href="gaseousquiz.html">Gas Giants Quiz</a>
                            </li>
                        </ul>
                    </li>
                    <li><a class="hide" id="finalquizlink" href="endquiz.html">Final Quiz</a>
                    </li>
                    <li><a class="hide" id="certificate" href="certificate.html">Certificate</a>
                    </li>
                </ul>
            </div>
            <!-- Nav wrapper end -->
        </div>
        <!-- Nav end -->
        
        <div>
            <article>
                <header>
                    <table align="center">
                        <tr>
                            <th><img src="images/boyastro.jpg" height="50px" width="50px"/></th>
                            <th><h1>The Sun: Center of the Solar System</h1></th>
                            <th><img src="images/girlastro.jpg" height="50px" width="50px"/></th>
                        </tr>
                    </table>
                </header>
                
                <aside>
                    <table id="tableimage">
                        <tr>
                            <img src="images/sun1.jpg"
                                alt="Image of the Sun with hot flares."
                                title="Image of the Sun with hot flares."/>
                        </tr>
                        <tr>
                            <p>A solar flare is a sudden flash of brightness observed over the 
                                Sun's surface.</p>
                        </tr> 
                        <tr>
                            <img src="images/sunlayers.jpg"
                                alt="Image of the Sun and it's layers."
                                title="Image of the Sun and it's layers."/>
                        </tr>
                        <tr>
                            <p>All layers of the Sun are affected by solar flares: photosphere, 
                                chromosphere, and corona.</p>
                        </tr> 
                    </table>
                </aside>
                
                <section>
                    <div class="center">
                        <img src="images/suncomic.png"
                            alt="Introduction comic to the Sun page."
                            title="Introduction comic to the Sun page."/>
                        <br/>
                        <audio controls>
                            <source src="audio/sun.mp3" type="audio/mpeg">
                            <source src="audio/sun.ogg" type="audio/ogg">
                            <source src="audio/sun.wav" type="audio/wav">
                        </audio>
                    </div>
                    
                    <h3>The Sun's Sizzling Vocabulary</h3>
                        <p>Hover your mouse over each item to learn its definition.</p>
                
                        <table>
                            <div id="hotspots">
                                <tr>
                                    <td>
                                        <div class="column">
                                            <div id="hs1" class="hotspot" 
                                                onmouseover="javascript:showText( 1 )"
                                                onmouseout="javascript:hideOutput()"><p>Axis</p></div> 
                                        </div>
                                    </td>
                                    <td>
                                        <div class="column">
                                            <div id="hs2" class="hotspot" 
                                                onmouseover="javascript:showText( 2 )"
                                                onmouseout="javascript:hideOutput()"><p>Core</p></div>  
                                        </div>
                                    </td>             
                                    <td>
                                        <div class="column">        
                                            <div id="hs3" class="hotspot"
                                                onmouseover="javascript:showText( 3 )"
                                                onmouseout="javascript:hideOutput()"><p>Corona</p></div> 
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="column">
                                            <div id="hs4" class="hotspot" 
                                                onmouseover="javascript:showText( 4 )"
                                                onmouseout="javascript:hideOutput()"><p>Eclipse</p></div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="column">
                                            <div id="hs5" class="hotspot" 
                                                onmouseover="javascript:showText( 5 )"
                                                onmouseout="javascript:hideOutput()"><p>Nuclear Fusion</p></div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="column">
                                            <div id="hs6" class="hotspot" 
                                                onmouseover="javascript:showText( 6 )"
                                                onmouseout="javascript:hideOutput()"><p>Photosphere</p></div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="column">
                                            <div id="hs7" class="hotspot" 
                                                onmouseover="javascript:showText( 7 )"
                                                onmouseout="javascript:hideOutput()"><p>Photosynthesis</p></div>
                                        </div>
                                    </td>
                                </tr>
                            </div>
                        </table>
                    
                        <div id="output">
                            <div id="output-box">
                                <p id="output-text">asdf</p>
                            </div>
                        </div>
                        
                    <h3>Interesting Facts</h3>
                        <ul>
                            <li>The Sun, first and foremost, is a star. It is not a planet. It is made 
                                of hot gases and plasma, and makes its own light and heat. In fact, the Sun’s 
                                rays are so strong that they can damage our eyes if we look directly at 
                                them. You have your glasses on, right? The only time to safely see the 
                                Sun’s <em>corona</em> would be during an <em>eclipse</em>.</li> 
                            <li>One way to understand the size of the Sun is to compare it to Earth. It 
                                would take 1 million Earths to fill the inside of the Sun. However, the Sun 
                                is not hollow. It is made mostly of hydrogen and helium, but also includes 
                                traces of oxygen, carbon, iron and other components. Although the Sun’s 
                                rays can be felt on Earth, it is hard to imagine that it would take us 
                                176 years to get to the Sun if we traveled at the average speed of a freeway 
                                (70 miles per hour). Wow, did you remember to pack enough undies?</li>
                            <li>The Sun has different layers. The outer layer is called the 
                                <em>photosphere</em> which has an average temperature of 6,000 degrees 
                                Celsius, while it’s <em>core</em> is even hotter at about 14 million 
                                degrees Celsius. OUCH, look don't touch!</li>
                            <li>The Sun is currently about 4.6 billion years old and will continue to 
                                exist for about another 5 billion years. It is half way through it’s 
                                life cycle.</li>
                        </ul>

                    <h3>History between the Sun and Humans</h3>
                        <ul>
                            <li>People have tried to make sense of the Sun since ancient times. In fact, 
                                the Egyptians used to worship the Sun because they observed how it 
                                contributed to the growth of life on Earth. They even believed in a Sun 
                                God, called Ra.</li> 
                            <li>Other ancient peoples also believed in a Sun God. The Greeks named their 
                                Sun God Hellos, while one Roman Empire named him Deus Sol Invictus and made 
                                worshipping the Sun a religion.</li>
                        </ul>

                    <h3>The Sun and Earth: A relationship</h3>
                        <ul>
                            <li>Our Earth is tilted 23.4 degrees on it's <em>axis</em> and rotates at an 
                                angle as it orbits around the Sun. This causes the Sun to shine differently 
                                on Earth during different parts of the year which effects our seasonal 
                                changes. The tilt effects how close we are to the Sun. For example, during 
                                the winter, the Northern Hemisphere is tilted away from the Sun.</li> 
                            <li><em>Nuclear fusion</em> occurs within the Sun's core which produces energy 
                                for Earth. This energy feeds life on Earth and allows plants to grow through 
                                <em>photosynthesis</em>.</li>
                        </ul>
                
                    <a href="#top">Back to top</a>
                </section>
            </article>
        </div>
        
        <div>
            <footer>
                <cite>All information was collected from 
                    <a href="http://www.merriam-webster.com">Merriam Webster Online: 
                        Dictionary and Thesaurus</a>, 
                    <a href="http://www.nationalgeographic.com/">National Geographic</a>, 
                    <a href="http://www.wikipedia.org">Wikipedia</a>, 
                    <a href="http://www.nasa.gov">NASA</a>, 
                    Etsy - Pretty Grafik Design</a>, &amp Etsy - Paula Kim Studio</a>
                </cite>
            </footer>
        </div>
    </body>
</html>
